<html>
<head>
	<title>js_03</title>
	<meta charset="utf-8"/>
	<style>
		div{
			float:left;margin:20px;
		}
		#div1{
			width:50px;height:50px;background:red;
		}
		#div2{
			width:250px;height:250px;background:#ccc;
			display:none;
		}
	</style>
	<script>
		window.onload=function(){
			var oDiv1=document.getElementById("div1");
			var oDiv2=document.getElementById("div2");
			var timer=null;
			oDiv1.onmouseover=function(){
				if(timer){
					clearTimeout(timer);
				}
				oDiv2.style.display="block";
			};
			oDiv1.onmouseout=function(){
				timer=setTimeout(function(){
					oDiv2.style.display="none";
				},1000);
			};
			oDiv2.onmouseover=function(){
				if(timer){
					clearTimeout(timer);
				}
			};
			oDiv2.onmouseout=function(){
				timer=setTimeout(function(){
					oDiv2.style.display="none";
				},1000);
			};
		}
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>